<!-- eslint-disable vue/valid-v-slot -->
<!-- eslint-disable vue/no-lone-template -->
<template>
  <div class="main-container">
    <div class="title">
      <a-tabs type="line" v-model:active-key="admin" auto-switch @tab-click="tabClick">
        <a-tab-pane title="分销日志" :key="0" />
        <a-tab-pane title="上级划卡" :key="1" />
        <a-tab-pane title="系统划卡" :key="2" /> </a-tabs
    ></div>
    <TableBody>
      <template #header>
        <TableHeader ref="tableHeaderRef" :show-filter="false">
          <template #search-content>
            <a-form ref="seachForm" :model="form">
              <a-row :gutter="24">
                <a-col :span="4" v-if="admin == 0">
                  <a-form-item field="card" hide-label>
                    <a-input
                      class="width100"
                      v-model="form.card"
                      placeholder="请输入卡号"
                      allow-clear
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4" v-if="admin == 0">
                  <a-form-item field="userId" hide-label>
                    <a-select
                      v-model="form.userId"
                      placeholder="请选择客户"
                      allow-clear
                      allow-search
                      :options="userList"
                      :virtual-list-props="{ height: 200 }"
                    />
                  </a-form-item>
                </a-col>
                <!-- <a-col :span="4">
                  <a-form-item hide-label>
                    <a-input-group class="width100">
                      <a-input v-model="form.addTotal" placeholder="开始分销数量" />
                      <a-input v-model="form.endTotal" placeholder="结束分销数量" />
                    </a-input-group>
                  </a-form-item>
                </a-col> -->
                <a-col :span="4">
                  <a-form-item hide-label>
                    <a-input-group class="width100">
                      <a-input v-model="form.addSuccess" placeholder="开始成功数量" />
                      <a-input v-model="form.endSuccess" placeholder="结束成功数量" />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <!-- <a-col :span="4" v-if="admin == 0">
                  <a-form-item hide-label>
                    <a-input-group class="width100">
                      <a-input v-model="form.addError" placeholder="开始失败数量" />
                      <a-input v-model="form.endError" placeholder="结束失败数量" />
                    </a-input-group>
                  </a-form-item>
                </a-col> -->
                <a-col :span="4">
                  <a-form-item field="addTime" hide-label>
                    <a-date-picker
                      class="width100"
                      v-model="form.addTime"
                      show-time
                      :disabledDate="changeTraceEnd"
                      placeholder="请选择分销开始时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endTime" hide-label>
                    <a-date-picker
                      class="width100"
                      v-model="form.endTime"
                      show-time
                      :disabledDate="changeTraceStart"
                      placeholder="请选择分销结束时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="btns" hide-label>
                    <a-space :size="15">
                      <a-button type="primary" html-type="submit" @click="doRefresh(1)"
                        ><template #icon> <icon-search /> </template>搜索</a-button
                      >
                      <a-button @click="resetSeach"
                        ><template #icon>
                          <icon-sync theme="outline" size="14" />
                        </template>
                        <!-- Use the default slot to avoid extra spaces -->
                        <template #default>重置</template></a-button
                      >
                    </a-space>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </template>
        </TableHeader>
      </template>
      <template #table-config>
        <a-space :size="15">
          <a-button type="outline" status="warning" @click="exportExcelLists" :loading="loading">
            <!-- Use the default slot to avoid extra spaces -->
            <template #default>导出</template>
          </a-button>
        </a-space>
        <a-space :size="15">
          <TableConfig
            @update-border="onUpdateBorder"
            @update-striped="onUpdateStriped"
            @refresh="doRefresh"
          />
        </a-space>
      </template>
      <template #default>
        <cardTables
          :tablist="cardList"
          :load="tables.tableLoading"
          :bordered="tables.bordered"
          :striped="tables.striped"
          :url="
            admin == 0
              ? getUserdistributionLists
              : admin == 1
              ? userDistributionDetail
              : adminDistributionDetail
          "
          :export-url="
            admin == 0
              ? exportUserdistributionLists
              : admin == 1
              ? userDistributionDetailExport
              : adminDistributionDetailExport
          "
          :export-name="
            admin == 0 ? '卡板分销详情列表' : admin == 1 ? '上级划卡详情列表' : '系统划卡详情列表'
          "
          @list="onlist"
        />
      </template>
      <template #footer>
        <TableFooter ref="tableFooterRef" :pagination="pagination" />
      </template>
    </TableBody>
  </div>
</template>

<script lang="ts" setup>
  import {
    getUserdistributionList,
    exportUserdistributionList,
    getUserdistributionLists,
    exportUserdistributionLists,
    adminDistribution,
    userDistribution,
    adminDistributionDetail,
    userDistributionDetail,
    adminDistributionExport,
    userDistributionExport,
    adminDistributionDetailExport,
    userDistributionDetailExport,
  } from '@/api/user'
  import { get } from '@/api/http'
  import { usePagination } from '@/hooks/table'
  import { onMounted, reactive, ref } from 'vue'
  import useCommonStore from '@/store/modules/common'
  import _ from 'lodash-es'
  import { IconSend } from '@arco-design/web-vue/es/icon'
  import cardTables from '@/views/log/compoents/cardChildren.vue'

  const userCommon = useCommonStore()

  const pagination = usePagination(doRefresh)

  const seachForm = ref()

  const loading = ref(false)

  const cardList: any = ref([])

  const admin = ref(0)

  const form = ref({
    adminId: '', //管理员id
    channelId: '', //渠道id
    seriesId: '', //系列id
    addTotal: '', // 入库开始数量
    endTotal: '', // 入库结束数量
    addSuccess: '',
    endSuccess: '',
    addError: '',
    endError: '',
    addTime: '',
    endTime: '',
    userId: '',
    card: '',
  })

  const tables = reactive({
    tableLoading: false,
    bordered: false,
    striped: false,
  })

  const tableColumns: any = reactive({
    list: [],
    listUser: [],
  })

  const resetSeach = () => {
    form.value = {
      adminId: '', //管理员id
      channelId: '', //渠道id
      seriesId: '', //系列id
      addTotal: '', // 入库开始数量
      endTotal: '', // 入库结束数量
      addSuccess: '',
      endSuccess: '',
      addError: '',
      endError: '',
      addTime: '',
      endTime: '',
      userId: '',
      card: '',
    }

    doRefresh(1)
  }

  const onlist = (val: any) => {
    tableColumns.list = val
  }

  const exportExcelLists = () => {
    loading.value = true
    userCommon
      .downLoads(
        admin.value == 0
          ? exportUserdistributionList
          : admin.value == 1
          ? userDistributionExport
          : adminDistributionExport,
        form.value,
        admin.value == 0
          ? '卡板分销日志列表'
          : admin.value == 1
          ? '上级划卡日志列表'
          : '系统划卡日志列表'
      )
      .then(() => {
        loading.value = false
      })
      .catch(() => {
        loading.value = false
      })
  }

  function onUpdateBorder(isBordered: boolean) {
    tables.bordered = isBordered
  }

  function onUpdateStriped(isStriped: boolean) {
    tables.striped = isStriped
  }

  function doRefresh(value?: number) {
    tables.tableLoading = true
    if (value) {
      pagination.page = value
    }
    if (admin.value == 0) {
      get({
        url: getUserdistributionList,
        data: {
          ...form.value,
          page: pagination.page,
          size: pagination.pageSize,
        },
      }).then((res) => {
        tables.tableLoading = false
        cardList.value = res.data.list
        pagination.setTotalSize((res.data as any).totalSize)
        return res.data.list
      })
    } else if (admin.value == 1) {
      get({
        url: userDistribution,
        data: {
          ...form.value,
          page: pagination.page,
          size: pagination.pageSize,
        },
      }).then((res) => {
        tables.tableLoading = false
        cardList.value = res.data.list
        pagination.setTotalSize((res.data as any).totalSize)
        return res.data.list
      })
    } else {
      get({
        url: adminDistribution,
        data: {
          ...form.value,
          page: pagination.page,
          size: pagination.pageSize,
        },
      }).then((res) => {
        tables.tableLoading = false
        cardList.value = res.data.list
        pagination.setTotalSize((res.data as any).totalSize)
        return res.data.list
      })
    }
  }

  //跟踪API开始时间限制结束时间
  function changeTraceEnd(time: any) {
    return time.getTime() > new Date(form.value.endTime).getTime() //大于结束时间的不选
  }
  //跟踪API结束时间限制开始时间
  function changeTraceStart(time: any) {
    return time.getTime() < new Date(form.value.addTime).getTime() //小于开始时间的不选
  }

  const userList = ref([])

  //全部客户
  function getUser() {
    userCommon.userListse().then((res: any) => {
      userList.value = res.data
    })
  }

  function tabClick() {
    form.value = {
      adminId: '', //管理员id
      channelId: '', //渠道id
      seriesId: '', //系列id
      addTotal: '', // 入库开始数量
      endTotal: '', // 入库结束数量
      addSuccess: '',
      endSuccess: '',
      addError: '',
      endError: '',
      addTime: '',
      endTime: '',
      userId: '',
      card: '',
    }
    doRefresh(1)
  }

  onMounted(async () => {
    await doRefresh()
    await getUser()
  })
</script>

<style lang="less" scoped>
  .title {
    margin-bottom: 20px;
    background-color: var(--color-bg-1);
    border-radius: 10px;
  }

  :deep(.arco-tabs-nav::before) {
    position: static !important;
    height: 0px !important;
  }

  :deep(.arco-tabs-content) {
    padding: 0;
  }

  :deep(.arco-tabs-nav-extra) {
    margin-right: 20px;
  }
  :deep(.arco-table-cell-expand-icon) {
    justify-content: center;
  }

  :deep(.arco-tabs-nav-tab) {
    background-color: var(--color-bg-1);
    padding: 20px 0;
    border-radius: 10px;
  }

  :deep(.arco-tabs-content::before) {
    height: 0px !important;
  }

  :deep(.arco-tabs-tab) {
    margin: 0 20px;
    padding: 0;
    padding-bottom: 5px;
  }

  :deep(.arco-table-cell-expand-icon) {
    justify-content: center;
  }

  :deep(.arco-table-cell-expand-icon) {
    justify-content: center;
  }

  :deep(.arco-tabs-nav-tab) {
    background-color: var(--color-bg-1);
    padding: 20px 0;
    border-radius: 10px;
  }

  :deep(.arco-tabs-content::before) {
    height: 0px !important;
  }

  :deep(.arco-tabs-tab) {
    margin: 0 20px;
    padding: 0;
    padding-bottom: 5px;
  }

  :deep(.arco-tabs-nav::before) {
    position: static !important;
    height: 0px !important;
  }

  // :deep(.arco-tabs-content) {
  //   padding-top: 20px;
  // }

  .box {
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //用省略号显示
    white-space: nowrap;
  }

  .tabs {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 40px;
    margin-bottom: 20px;

    .button {
      box-sizing: border-box;
      padding-bottom: 5px;
    }
  }

  .action {
    color: #009dff;
    border-bottom: 3px solid #009dff;
  }

  .butten {
    padding: 0px 4px;
  }
</style>
